<!DOCTYPE HTML>
<html class="no-js">
<head>
<!-- Basic Page Needs
  ================================================== -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Real Spaces - Wordpress Real Estate Theme</title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
<!-- Mobile Specific Metas
  ================================================== -->
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="format-detection" content="telephone=no">
<!-- CSS
  ================================================== -->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="plugins/prettyphoto/css/prettyPhoto.css" rel="stylesheet" type="text/css">
<link href="plugins/owl-carousel/css/owl.carousel.css" rel="stylesheet" type="text/css">
<link href="plugins/owl-carousel/css/owl.theme.css" rel="stylesheet" type="text/css">
<!--[if lte IE 8]><link rel="stylesheet" type="text/css" href="css/ie8.css" media="screen" /><![endif]-->
<!-- Color Style -->
<link class="alt" href="colors/color10.css" rel="stylesheet" type="text/css">
<link href="style-switcher/css/style-switcher.css" rel="stylesheet" type="text/css">
<!-- SCRIPTS
  ================================================== -->
<script src="js/modernizr.js"></script><!-- Modernizr -->
</head>
<body>
<!--[if lt IE 7]>
	<p class="chromeframe">You are using an outdated browser. <a href="http://browsehappy.com/">Upgrade your browser today</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to better experience this site.</p>
<![endif]-->
<div class="body">
  <!-- Start Site Header -->
  <header class="site-header">
    <div class="top-header hidden-xs">
      <div class="container">
        <div class="row">
          <div class="col-md-4 col-sm-6">
            <ul class="horiz-nav pull-left">
              <li class="dropdown"><a data-toggle="dropdown"><i class="fa fa-user"></i> Login <b class="caret"></b></a>
                <ul class="dropdown-menu">
                  <li><a href="my-properties.html">My properties</a></li>
                  <li><a href="submit.html">Add a property</a></li>
                </ul>
              </li>
              <li><a href="login.html"><i class="fa fa-check-circle"></i> Register</a></li>
              </ul>
          </div>
          <div class="col-md-8 col-sm-6">
            <ul class="horiz-nav pull-right">
                  <li><a href="http://instagram.com/" target="_blank"><i class="fa fa-instagram"></i></a></li>
                  <li><a href="http://facebook.com/" target="_blank"><i class="fa fa-facebook"></i></a></li>
                  <li><a href="http://twitter.com/" target="_blank"><i class="fa fa-twitter"></i></a></li>
              </ul>
            </div>
        </div>
      </div>
    </div>
    <div class="middle-header">
      <div class="container">
        <div class="row">
          <div class="col-md-4 col-sm-8 col-xs-8">
            <h1 class="logo"> <a href="index.html"><img src="images/logo.png" alt="Logo"></a> </h1>
          </div>
          <div class="col-md-8 col-sm-4 col-xs-4">
              <div class="contact-info-blocks hidden-sm hidden-xs">
                  <div>
                      <i class="fa fa-phone"></i> Free Line For You
                    <span>080 378678 90</span>
                </div>
                  <div>
                      <i class="fa fa-envelope"></i> Email Us
                    <span>sales@realspaces.com</span>
                </div>
                  <div>
                      <i class="fa fa-clock-o"></i> Working Hours
                    <span>09:00 to 17:00</span>
                </div>
             </div>
              <a href="#" class="visible-sm visible-xs menu-toggle"><i class="fa fa-bars"></i></a>
          </div>
        </div>
      </div>
    </div>
    <div class="main-menu-wrapper">
      <div class="container">
        <div class="row">
          <div class="col-md-12">
            <nav class="navigation">
              <ul class="sf-menu">
                <li><a href="index.html">Home</a>
                  <ul class="dropdown">
                    <li><a href="index.html">Version 1</a></li>
                    <li><a href="index1.html">Version 2</a></li>
                  </ul>
                </li>
                <li><a href="about.html">About Us</a></li>
                <li><a href="login.html">Register as Agent</a></li>
                <li><a href="javascript:;">Pages</a>
                  <ul class="dropdown">
                    <li><a href="agents.html">Agents</a></li>
                    <li><a href="agent-detail.html">Agent Single</a></li>
                    <li><a href="my-properties.html">Agent Properties</a></li>
                    <li><a href="submit.html">List a property</a></li>
                    <li><a href="pricing.html">Pricing</a></li>
                    <li><a href="login.html">Register/Login</a></li>
                    <li><a href="404.html">404</a></li>
                  </ul>
                </li>
                <li><a href="javascript:;">Properties</a>
                  <ul class="dropdown">
                    <li><a href="javascript:;">Listing</a>
                      <ul>
                          <li><a href="simple-listing.html">Simple Listing</a></li>
                          <li><a href="listing-map.html">Simple Listing with map</a></li>
                          <li><a href="simple-listing-fw.html">Full Width Listing</a></li>
                          <li><a href="grid-listing.html">Grid Listing</a></li>
                          <li><a href="grid-map.html">Grid Listing with map</a></li>
                          <li><a href="grid-listing-fw.html">Full Width Grid</a></li>
                        </ul>
                    </li>
                    <li><a href="javascript:;">Types</a>
                      <ul>
                          <li><a href="property-type.html">Villa</a></li>
                          <li><a href="property-type.html">Single Home</a></li>
                          <li><a href="property-type.html">Cottage</a></li>
                          <li><a href="property-type.html">Family House</a></li>
                          <li><a href="property-type.html">Apartment</a></li>
                        </ul>
                    </li>
                    <li><a href="javascript:;">Contract type</a>
                      <ul>
                          <li><a href="contract-type.html">Sale</a></li>
                          <li><a href="contract-type.html">Rent</a></li>
                          <li><a href="contract-type.html">Sold</a></li>
                        </ul>
                    </li>
                    <li><a href="property-detail.html">Single Property</a></li>
                    <li><a href="property-detail-fw.html">Single Property Full Width</a></li>
                  </ul>
                </li>
                <li><a href="javascript:;">Features</a>
                  <ul class="dropdown">
                    <li><a href="shortcodes.html">Shortcodes</a></li>
                    <li><a href="typography.html">Typography</a></li>
                  </ul>
                </li>
                <li><a href="javascript:;">Gallery</a>
                  <ul class="dropdown">
                    <li><a href="gallery-2cols.html">2 Columns</a></li>
                    <li><a href="gallery-3cols.html">3 Columns</a></li>
                    <li><a href="gallery-4cols.html">4 Columns</a></li>
                    <li><a href="gallery-masonry.html">Masonry Grid</a></li>
                  </ul>
                </li>
                <li><a href="javascript:;">Blog</a>
                  <ul class="dropdown">
                    <li><a href="blog-masonry.html">Masonry</a></li>
                    <li><a href="blog-timeline.html">Timeline</a></li>
                    <li><a href="blog-thumbnails.html">Classic</a></li>
                    <li><a href="blog-post.html">Single Post</a></li>
                  </ul>
                </li>
                <li><a href="contact.html">Contact</a></li>
              </ul>
            </nav>
          </div>
        </div>
      </div>
    </div>
  </header>
  <!-- End Site Header --> 
  <!-- Site Showcase -->
  <div class="site-showcase"> 
    <!-- Start Page Header -->
    <div class="parallax page-header" style="background-image:url(images/page-header1.jpg);">
      <div class="container">
        <div class="row">
          <div class="col-md-12">
            <h1>Shortcodes</h1>
          </div>
        </div>
      </div>
    </div>
    <!-- End Page Header --> 
  </div>
  <!-- Start Content -->
  <div class="main" role="main">
    <div id="content" class="content full">
      <div class="container">
        <div class="page">
          <div class="row">
            <div class="col-md-6">
              <h2>Tabs</h2>
              <div class="tabs">
                <ul class="nav nav-tabs">
                  <li class="active"> <a data-toggle="tab" href="#sampletab1"> Sample Tab #1 </a> </li>
                  <li> <a data-toggle="tab" href="#sampletab2"> Sample Tab #2 </a> </li>
                  <li> <a data-toggle="tab" href="#sampletab3"> Sample Tab #3 </a> </li>
                </ul>
                <div class="tab-content">
                  <div id="sampletab1" class="tab-pane active">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce velit tortor, dictum in gravida nec, aliquet non lorem. Donec vestibulum justo a diam ultricies pellentesque. Quisque mattis diam vel lacus tincidunt elementum. Sed vitae adipiscing turpis. Aenean ligula nibh, molestie id viverra a, dapibus at dolor.</p>
                  </div>
                  <div id="sampletab2" class="tab-pane">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce velit tortor, dictum in gravida nec, aliquet non lorem. Donec vestibulum justo a diam ultricies pellentesque.</p>
                  </div>
                  <div id="sampletab3" class="tab-pane">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce velit tortor, dictum in gravida nec, aliquet non lorem. Donec vestibulum justo a diam ultricies pellentesque. Quisque mattis diam vel lacus tincidunt elementum. Sed vitae adipiscing turpis. Aenean ligula nibh, molestie id viverra a, dapibus at dolor. In iaculis viverra neque, ac eleifend ante lobortis id. In viverra ipsum ac eros tristique dignissim. Donec aliquam velit vitae mi dictum. </p>
                  </div>
                </div>
              </div>
              <h2>Progress Bars</h2>
              <div class="progress-bars">
                <div class="progress-label"> <span>HTML/CSS</span> </div>
                <div class="progress">
                  <div class="progress-bar progress-bar-primary" data-appear-progress-animation="90%"> <span class="progress-bar-tooltip">90%</span> </div>
                </div>
                <div class="progress-label"> <span>Photoshop</span> </div>
                <div class="progress">
                  <div class="progress-bar progress-bar-primary" data-appear-progress-animation="95%" data-appear-animation-delay="200"> <span class="progress-bar-tooltip">95%</span> </div>
                </div>
                <div class="progress-label"> <span>Joomla</span> </div>
                <div class="progress">
                  <div class="progress-bar progress-bar-primary" data-appear-progress-animation="75%" data-appear-animation-delay="400"> <span class="progress-bar-tooltip">75%</span> </div>
                </div>
                <div class="progress-label"> <span>Wordpress</span> </div>
                <div class="progress">
                  <div class="progress-bar progress-bar-primary" data-appear-progress-animation="100%" data-appear-animation-delay="600"> <span class="progress-bar-tooltip">100%</span> </div>
                </div>
              </div>
              <div class="progress-label"> <span>Stripped Progress Bar</span> </div>
              <div class="progress progress-striped">
                <div class="progress-bar progress-bar-success" style="width: 40%"> <span class="sr-only">40% Complete (success)</span> </div>
              </div>
              <div class="progress-label"> <span>Colored Progress Bars</span> </div>
              <div class="progress">
                <div class="progress-bar progress-bar-info" style="width: 20%"> <span class="sr-only">20% Complete</span> </div>
              </div>
              <div class="progress">
                <div class="progress-bar progress-bar-warning" style="width: 60%"> <span>60% Complete (warning)</span> </div>
              </div>
              <div class="progress">
                <div class="progress-bar progress-bar-danger" style="width: 80%"> <span class="sr-only">80% Complete</span> </div>
              </div>
            </div>
            <div class="col-md-6">
              <h2>Accordion</h2>
              <!-- Start Accordion -->
              <div class="accordion" id="accordionArea">
                <div class="accordion-group panel">
                  <div class="accordion-heading accordionize"> <a class="accordion-toggle active" data-toggle="collapse" data-parent="#accordionArea" href="#oneArea"> Accordion Panel #1 <i class="fa fa-angle-down"></i> </a> </div>
                  <div id="oneArea" class="accordion-body in collapse">
                    <div class="accordion-inner"> Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. 
                      Sed posuere consectetur est at lobortis. Nulla vitae elit libero, a pharetra augue. Donec ullamcorper nulla non metus auctor fringilla. 
                      Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet. Donec sed odio dui. 
                      Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Sed posuere consectetur est at lobortis. Nulla vitae elit libero, a pharetra augue. 
                      Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet. </div>
                  </div>
                </div>
                <div class="accordion-group panel">
                  <div class="accordion-heading accordionize"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionArea" href="#twoArea"> Accordion Panel #2 <i class="fa fa-angle-down"></i> </a> </div>
                  <div id="twoArea" class="accordion-body collapse">
                    <div class="accordion-inner"> Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. 
                      Sed posuere consectetur est at lobortis. Nulla vitae elit libero, a pharetra augue. Donec ullamcorper nulla non metus auctor fringilla. 
                      Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet. Donec sed odio dui. 
                      Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Sed posuere consectetur est at lobortis. Nulla vitae elit libero, a pharetra augue. 
                      Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet. </div>
                  </div>
                </div>
                <div class="accordion-group panel">
                  <div class="accordion-heading accordionize"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionArea" href="#threeArea"> Accordion Panel #3 <i class="fa fa-angle-down"></i> </a> </div>
                  <div id="threeArea" class="accordion-body collapse">
                    <div class="accordion-inner"> Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. 
                      Sed posuere consectetur est at lobortis. Nulla vitae elit libero, a pharetra augue. Donec ullamcorper nulla non metus auctor fringilla. 
                      Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet. Donec sed odio dui. 
                      Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Sed posuere consectetur est at lobortis. Nulla vitae elit libero, a pharetra augue. 
                      Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet. </div>
                  </div>
                </div>
              </div>
              <!-- End Accordion -->
              <h2>Toggles</h2>
              <div class="accordion" id="toggleArea">
                <div class="accordion-group panel">
                  <div class="accordion-heading togglize"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#" href="#collapseOne"> Toggle Panel #1 <i class="fa fa-plus-circle"></i> <i class="fa fa-minus-circle"></i> </a> </div>
                  <div id="collapseOne" class="accordion-body collapse">
                    <div class="accordion-inner"> Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. 
                      Sed posuere consectetur est at lobortis. Nulla vitae elit libero, a pharetra augue. Donec ullamcorper nulla non metus auctor fringilla. 
                      Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet. Donec sed odio dui. 
                      Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Sed posuere consectetur est at lobortis. Nulla vitae elit libero, a pharetra augue. 
                      Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet. </div>
                  </div>
                </div>
                <div class="accordion-group panel">
                  <div class="accordion-heading togglize"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#" href="#collapseTwo"> Toggle Panel #2 <i class="fa fa-plus-circle"></i> <i class="fa fa-minus-circle"></i> </a> </div>
                  <div id="collapseTwo" class="accordion-body collapse">
                    <div class="accordion-inner"> Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. 
                      Sed posuere consectetur est at lobortis. Nulla vitae elit libero, a pharetra augue. Donec ullamcorper nulla non metus auctor fringilla. 
                      Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet. Donec sed odio dui. 
                      Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Sed posuere consectetur est at lobortis. Nulla vitae elit libero, a pharetra augue. 
                      Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet. </div>
                  </div>
                </div>
                <div class="accordion-group">
                  <div class="accordion-heading togglize"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#" href="#collapseThird"> Toggle Panel #3 <i class="fa fa-plus-circle"></i> <i class="fa fa-minus-circle"></i> </a> </div>
                  <div id="collapseThird" class="accordion-body collapse">
                    <div class="accordion-inner"> Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. 
                      Sed posuere consectetur est at lobortis. Nulla vitae elit libero, a pharetra augue. Donec ullamcorper nulla non metus auctor fringilla. 
                      Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet. Donec sed odio dui. 
                      Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Sed posuere consectetur est at lobortis. Nulla vitae elit libero, a pharetra augue. 
                      Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet. </div>
                  </div>
                </div>
              </div>
              <!-- End Toggle --> 
            </div>
          </div>
          <hr>
          <div class="row">
            <div class="col-md-12" data-appear-animation="bounceInRight">
              <h2>Alert Boxes</h2>
              <div class="alert alert-standard fade in"> <a class="close" data-dismiss="alert" href="#">&times;</a> <strong>Oh snap!</strong> Change a few things up and try submitting again. </div>
              <div class="alert alert-warning fade in"> <a class="close" data-dismiss="alert" href="#">&times;</a> <strong>Warning!</strong> Best check yo self, you're not looking too good. </div>
              <div class="alert alert-error fade in"> <a class="close" data-dismiss="alert" href="#">&times;</a> <strong>Oh snap!</strong> Change a few things up and try submitting again. </div>
              <div class="alert alert-info fade in"> <a class="close" data-dismiss="alert" href="#">&times;</a> <strong>Heads up!</strong> This alert needs your attention, but it's not super important. </div>
              <div class="alert alert-success fade in"> <a class="close" data-dismiss="alert" href="#">&times;</a> <strong>Well done!</strong> You successfully read this important alert message. </div>
            </div>
          </div>
          <hr>
          <div class="row">
            <div class="col-md-6">
              <h2>Tooltips</h2>
              <p>Tight pants next level keffiyeh <a href="#" data-toggle="tooltip" data-original-title="Default tooltip" > you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel<a href="#" id="back-top" data-placement="left"  data-toggle="tooltip" title="" data-original-title="Another tooltip"> have a</a> terry richardson vinyl chambray. </p>
            </div>
            <div class="col-md-6">
              <h2>Modal Box</h2>
              <p>Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.</p>
              <p>Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page.</p>
              <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button>
              <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                  <div class="modal-content">
                    <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                      <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                    </div>
                    <div class="modal-body"> One fine body... </div>
                    <div class="modal-footer">
                      <button type="button" class="btn btn-default inverted" data-dismiss="modal">Close</button>
                      <button type="button" class="btn btn-primary">Save changes</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <hr>
        </div>
        <section class="counters padding-tb45 accent-color text-align-center">
          <div class="container">
            <div class="row">
              <div class="col-lg-3 col-md-3 col-sm-3">
                <div class="fact-ico"> <i class="fa fa-glass fa-4x"></i> </div>
                <div class="clearfix"></div>
                <div class="timer" data-perc="9000"> <span class="count">9000</span> </div>
                <div class="clearfix"></div>
                <span class="fact">Drinks Consumed</span> </div>
              <div class="col-lg-3 col-md-3 col-sm-3">
                <div class="fact-ico"> <i class="fa fa-map-marker fa-4x"></i> </div>
                <div class="clearfix"></div>
                <div class="timer" data-perc="96"> <span class="count">96</span> </div>
                <div class="clearfix"></div>
                <span class="fact">Places Visited</span> </div>
              <div class="col-lg-3 col-md-3 col-sm-3">
                <div class="fact-ico"> <i class="fa fa-music fa-4x"></i> </div>
                <div class="clearfix"></div>
                <div class="timer" data-perc="1500"> <span class="count">1500</span> </div>
                <div class="clearfix"></div>
                <span class="fact">Songs Played</span> </div>
              <div class="col-lg-3 col-md-3 col-sm-3">
                <div class="fact-ico"> <i class="fa fa-dribbble fa-4x"></i> </div>
                <div class="clearfix"></div>
                <div class="timer" data-perc="1400"> <span class="count">1400</span> </div>
                <div class="clearfix"></div>
                <span class="fact">hours played</span> </div>
            </div>
          </div>
        </section>
        <div class="container margin-40">
          <hr>
          <div class="row">
            <div class="col-md-6">
              <h2>Forms</h2>
              <p>Individual form controls automatically receive some global styling.</p>
              <form action="#" type="post">
                <div class="row">
                  <div class="form-group">
                    <div class="col-md-6">
                      <label>Your name *</label>
                      <input type="text" value="" maxlength="100" class="form-control" name="name" id="name">
                    </div>
                    <div class="col-md-6">
                      <label>Your email address *</label>
                      <input type="email" value="" maxlength="100" class="form-control" name="email" id="email">
                    </div>
                  </div>
                </div>
                <div class="row">
                  <div class="form-group">
                    <div class="col-md-12">
                      <label>Comment *</label>
                      <textarea maxlength="5000" rows="10" class="form-control" name="comment" id="comment" style="height: 138px;"></textarea>
                    </div>
                  </div>
                </div>
                <div class="row">
                  <div class="col-md-12">
                    <input type="submit" value="Submit" class="btn btn-primary" data-loading-text="Loading...">
                  </div>
                </div>
              </form>
            </div>
            <div class="col-md-5 col-md-offset-1">
              <hr class="visible-sm visible-xs tall" />
              <h2>Pagination</h2>
              <p class="short">Large</p>
              <ul class="pagination pagination-lg">
                <li><a href="#"><i class="fa fa-chevron-left"></i></a></li>
                <li class="active"><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li><a href="#"><i class="fa fa-chevron-right"></i></a></li>
              </ul>
              <p class="short">Default</p>
              <ul class="pagination">
                <li><a href="#"><i class="fa fa-chevron-left"></i></a></li>
                <li class="active"><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li><a href="#"><i class="fa fa-chevron-right"></i></a></li>
              </ul>
              <p class="short">Small</p>
              <ul class="pagination pagination-sm">
                <li><a href="#"><i class="fa fa-chevron-left"></i></a></li>
                <li class="active"><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li><a href="#"><i class="fa fa-chevron-right"></i></a></li>
              </ul>
            </div>
          </div>
          <hr>
          <div class="row">
            <div class="col-md-6">
              <h2>Buttons</h2>
              <button type="button" class="btn btn-default">Default</button>
              <button type="button" class="btn btn-primary">Primary</button>
              <button type="button" class="btn btn-success">Success</button>
              <button type="button" class="btn btn-info">Info</button>
              <button type="button" class="btn btn-warning">Warning</button>
              <button type="button" class="btn btn-danger">Danger</button>
              <h2 class="spaced">Buttons Disabled</h2>
              <button type="button" class="btn btn-primary" disabled="disabled">Primary button</button>
              <button type="button" class="btn btn-default" disabled="disabled">Button</button>
              <h2 class="spaced">Labels</h2>
              <span class="label label-default">Default</span> <span class="label label-primary">Primary</span> <span class="label label-success">Success</span> <span class="label label-info">Info</span> <span class="label label-warning">Warning</span> <span class="label label-danger">Danger</span> <span class="label label-dark">Dark</span> </div>
            <div class="col-md-5 col-md-offset-1">
              <hr class="visible-sm visible-xs tall" />
              <h2>Buttons Sizes</h2>
              <p>
                <button type="button" class="btn btn-primary btn-lg">Large button</button>
                <button type="button" class="btn btn-default btn-lg">Large button</button>
              </p>
              <p>
                <button type="button" class="btn btn-primary">Default button</button>
                <button type="button" class="btn btn-default">Default button</button>
              </p>
              <p>
                <button type="button" class="btn btn-primary btn-sm">Small button</button>
                <button type="button" class="btn btn-default btn-sm">Small button</button>
              </p>
              <p>
                <button type="button" class="btn btn-primary btn-xs">Extra small button</button>
                <button type="button" class="btn btn-default btn-xs">Extra small button</button>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- End Content --> 
  <!-- Start Site Footer -->
  <footer class="site-footer">
      <div class="container">
          <div class="row">
            <div class="col-md-3 col-sm-6 footer-widget widget">
                <h3 class="widgettitle">Latest News</h3>
                  <ul>
                      <li>
                          <a href="blog-post.html">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>
                          <span class="meta-data">1 March, 2014</span>
                      </li>
                      <li>
                      <a href="blog-post.html">Lorem ipsum dolor sit amet elit, consectetur adipiscing.</a>
                          <span class="meta-data">28 February, 2014</span>
                      </li>
                      <li>
                      <a href="blog-post.html">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>
                          <span class="meta-data">26 February, 2014</span>
                      </li>
                  </ul>
              </div>
            <div class="col-md-3 col-sm-6 footer-widget widget">
                <h3 class="widgettitle">Useful Links</h3>
               <ul>
                <li><a href="submit.html">Add your listing</a></li>
                <li><a href="login.html">Become an agent</a></li>
                <li><a href="pricing.html">Pricing</a></li>
                <li><a href="about.html">About us</a></li>
                <li><a href="shortcodes.html">Theme features</a></li>
               </ul>
           </div>
            <div class="col-md-3 col-sm-6 footer-widget widget">
              <h3 class="widgettitle">Twitter Updates</h3>
                  <ul class="twitter-widget"></ul>
           </div>
            <div class="col-md-3 col-sm-6 footer-widget widget">
                <h3 class="widgettitle">Our Newsletter</h3>
               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla convallis egestas rhoncus. Donec facilisis fermentum sem, ac viverra ante luctus vel.</p>
               <form>
                    <input type="email" name="email" id="email" placeholder="Enter your email" class="form-control">
                  <input type="submit" name="submit" class="btn btn-primary btn-block btn-lg" value="Subscribe">
               </form>
           </div>
       </div>
   </div>
  </footer>
  <footer class="site-footer-bottom">
    <div class="container">
      <div class="row">
        <div class="copyrights-col-left col-md-6 col-sm-6">
          <p>&copy; 2014 RealSpaces. All Rights Reserved</p>
        </div>
        <div class="copyrights-col-right col-md-6 col-sm-6">
          <div class="social-icons">
              <a href="https://www.facebook.com/" target="_blank"><i class="fa fa-facebook"></i></a>
             <a href="https://twitter.com/" target="_blank"><i class="fa fa-twitter"></i></a>
             <a href="http://www.pinterest.com/" target="_blank"><i class="fa fa-pinterest"></i></a>
             <a href="https://plus.google.com/" target="_blank"><i class="fa fa-google-plus"></i></a>
             <a href="http://www.pinterest.com/" target="_blank"><i class="fa fa-youtube"></i></a>
             <a href="#"><i class="fa fa-rss"></i></a>
          </div>
        </div>
      </div>
    </div>
  </footer>
  <!-- End Site Footer -->
  <a id="back-to-top"><i class="fa fa-angle-double-up"></i></a>
</div>
<script src="js/jquery-2.0.0.min.js"></script> <!-- Jquery Library Call --> 
<script src="plugins/prettyphoto/js/prettyphoto.js"></script> <!-- PrettyPhoto Plugin --> 
<script src="plugins/owl-carousel/js/owl.carousel.min.js"></script> <!-- Owl Carousel --> 
<script src="plugins/flexslider/js/jquery.flexslider.js"></script> <!-- FlexSlider --> 
<script src="js/helper-plugins.js"></script> <!-- Plugins --> 
<script src="js/bootstrap.js"></script> <!-- UI --> 
<script src="js/waypoints.js"></script> <!-- Waypoints --> 
<script src="js/init.js"></script> <!-- All Scripts --> 
<script src="style-switcher/js/jquery_cookie.js"></script> 
<script src="style-switcher/js/script.js"></script> 
<!-- Style Switcher Start --> 
</body>
</html>